<template>
	<div class="page">
		<div class="top-page">
		
			<Banner />
		</div>
		<div class="page-body">
			<div class="wecome-box">
				<div class="text">
					<div class="title">
						欢迎来到REDPANDA WORLD
					</div>
					<p class="content-text">
						欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD，欢迎来到REDPANDA
						WORLD,欢迎来到
						欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD
						欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD，欢迎来到REDPANDA WORLD
					</p>
				</div>
				<div class="img-box">
					<img src="../assets/img/redpanda-btn.png">
				</div>
			</div>
			<div class="active-box">
				<div class="active-header">
					<div class="line-box left">
						<span></span>
					</div>
					<div class="active-title">
						<span class="text-s">最新活动</span>
						<span class="ll"></span>
						<span class="text-s">近期活动</span>
					</div>
					<div class="line-box ">
						<span></span>
					</div>
				</div>
				<div class="active-center">
					<div class="active" v-for="(i,index) in 3" :key="i+index" >
						<div class="a-img-box">
							<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
						</div>
						<div class="active-footer">
							<p class="act-tit">活动标题</p>
							<p class="act-cent">最新活动介绍</p>
							<p class="time">2050/20/12</p>
						</div>
					</div>
				</div>
			</div>
			<div class="line"></div>
			<div class="link-box">
				<div class="link-title">友情链接</div>
				<ul class="links">
					<li class="link" v-for="(i,index) in 6" :key="i+index">
						<img src="../assets/img/REDPANDADAO.png" />
					</li>
				</ul>
			</div>
		</div>
		<div class="footer">
			  <div class="line-f"></div>
			  <div class="footer-last">
				  <div class="footer-left">
					 <router-link to="/" >更多支持</router-link>
					 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					 <router-link to="/" >帮助中心</router-link>
				  </div>
				  <div class="footer-right">
			            <div class="footer-logo">
							<div class="logo-box-f "><img src="../assets/img/redpanda-logo2.png"/></div>
							<div class="logo-box-h "><img src="../assets/img/REDPANDADAO.png"/></div>
						</div>
						<div class="footer-btn">
							 <router-link to="/" ><img src="../assets/img/discord.png"/></router-link>
							 <router-link to="/" ><img src="../assets/img/telegram.png"/></router-link>
							  <router-link to="/" ><img src="../assets/img/twitter.png"/></router-link>
						</div>
				  </div>
			  </div>
		</div>
	</div>
</template>

<script>
	import Header from '../components/Header.vue';
	import Banner from '../components/Banner.vue';
	export default {
		components: {
			Header,
			Banner
		}



	}
</script>

<style scoped>
	.page{
		 background-color: #000000;
		 overflow: hidden;
	}
	.page-body {
		width: 100%;
		padding-left: 80px;
		padding-right: 80px;
		box-sizing: border-box;
		overflow:hidden ;
	}

	.wecome-box {
		width: 100%;
		padding-top: 30px;
		overflow: hidden;
	}

	.text {
		float: left;
		width: 60%;
		color: #fff;
	}

	.title {
		font-size: 32px;
		font-weight: bold;
		letter-spacing: 2px;
		text-align: left;
		margin-top: 20px;
	}

	.content-text {
		font-size: 18px;
		font-style: normal;
		text-indent: 2em;
		letter-spacing: 1px;
		text-align: left;
		line-height: 25px;
		margin-top: 40px;
		word-wrap: break-word;
		padding-bottom: 80px;

	}

	.img-box {
		float: left;
		width: 40%;
		position: relative;
	}

	.img-box img {
		height: 400px;
		position: absolute;
		right: 80px;
		top: -80px;
		cursor: pointer;
	}

	.active-box {
		width: 100%;
		background-color: #000;
		box-sizing: border-box;
	}

	.active-header {
		width: 100%;
		height: 80px;

	}

	.line-box {
		height: 2px;
		margin-top: 39px;
		background-color: #fff;
		width: 40%;
		float: right;
	}

	.left {
		float: left !important;
	}

	.active-title {
		width: 20%;
		float: left;
		line-height: 80px;
		height: 80px;
		font-size: 28px;
		font-weight: bold;
		color: #fff;
		text-align: center;
	}

	.active-title .text-s {
		margin-top: -40px;
		display: inline-block;
		line-height: 40px;
	}

	.ll {
		height: 28px;
		width: 2px;
		display: inline-block;
		background-color: #fff;
		margin-left: 20px;
		margin-right: 20px;
		line-height: 0px;
	}

	.active-center {
		width: 100%;
		background-color: #000000;
		padding-left: 1%;
		padding-right: 1%;
		box-sizing: border-box;
		overflow: hidden;
		margin-top: 50px;
	}
	
	.active{
		 width: 33.3%;
		 float: left;
		 padding-right: 3% ;
		 padding-left: 3%;
		 box-sizing: border-box;
		 cursor: pointer;
		 
	}
	.a-img-box{
		 width: 100%;
	}
	.a-img-box img{
		 width: 100%;
	}
	.active-footer{
		margin-top: 20px;
		width: 100%;
		background-color: #fff;
		margin-bottom: 100px;
		padding: 20px;
		box-sizing: border-box;
	}
	.act-tit {
		 font-size: 18px;
		 color: #000000;
		 text-align: left;
		 margin: 0px;
	}
	.act-cent{
		 font-size: 16px;
		 color: #666;
		 text-align: left;
		 text-indent: 2em;
	}
	.time {
		 text-align: right;
		 color: #888;
		 margin-bottom: 0px;
	}
	.line{
		 width: 100%;
		 background-color: #fff;
		 height: 2px;
		 margin-bottom: 50px;
	}
	.line-f{
		width: 100%;
		background-color: #fff;
		height: 2px;
	}
	.link-box{
		 width: 100%;
		 margin-bottom: 50px;
	}
	.link-title {
		font-size: 30px;
		color: #fff;
		text-align: left;
	}
	.links{
		 font-style: normal;
		 list-style: none;
		 display: flex;
		 flex-direction: row;
		 margin-top: 30px;
		 padding: 0px;
	}
	.link{
		 flex: 1;
		/* //background-color: #fff; */
		 margin-right: 40px;
		 cursor: pointer;
	}
	.link img {
		 width: 80%;
		 margin: auto;
	}
	.footer-last{
		 width: 100%;
		 padding-left: 20px;
		 padding-right: 40px;
		 box-sizing: border-box;
		 overflow: hidden;
	}
	.footer{
		 width: 100%;
		 height: 100px;
		 overflow: hidden;
	}
	.footer-left {
		 float: left;
		 width: 400px;
		 
	}
	.footer-left a{
		 font-size: 20px;
		 font-weight: bold;
		 line-height: 100px;
	}
	.footer-right {
		 float: right;
		height: 100px;
	}
	.footer-logo{
		 float: left;
		 height: 100px;
		  margin-top: 30px;
	}
	.logo-box-f{
		 float: left;
		
	}
	.logo-box-f img{ 
		height: 40px;
	}
	.logo-box-h img{
		height: 40px;
	}
	.logo-box-h{
		 float: left;
	}
	.footer-btn{
		float: left;
		display: flex;
		flex-direction: row;
		margin-top: 30px;
	}
	.footer-btn a{
		 flex: 1;
		 margin-left: 30px;
	}
</style>
